<template>
  <div>
    <basic-echars :echarsData="echarsData" />
    <basic-echars :echarsData="echarsData2" />
    <basic-echars :echarsData="echarsData3" />
    <rose-echars :roseData="roseData" />
    

    <div style="width: 185px;height: 60px;background: #ffffff;border-radius: 8px;display: flex;">
      <!-- 日期 -->
      <div style="display:flex;flex-direction: column;margin-right: 20.5px;">
        <div style="height: 14px;font-size: 14px;font-weight: normal;text-align: left;color: #999999;line-height: 14px;margin-bottom: 7px;">8月17日</div>
        <div>
          <span style="height: 20px;font-size: 24px;font-weight: 700;text-align: left;color: #1a7dff;line-height: 20px;margin-right:9px;">92</span>
          <span style="width: 24px;height: 12px;font-size: 12px;color: #999999;line-height: 12px;">万元</span>
        </div>
      </div>
      <!-- 同比/环比 -->
      <div style="margin-right: 10.34px;">
        <div style="width: 28px;height: 14px;font-size: 14px;font-weight: normal;text-align: left;color: #999999;line-height: 14px;margin-bottom: 11px;margin-top: 2px;">同比</div>
        <div style="width: 28px;height: 14px;font-size: 14px;font-weight: normal;text-align: left;color: #999999;line-height: 14px;">环比</div>
      </div>
      <!-- 三角形 -->
      <div style="margin-right: 2.34px;">
        <div style="width:0px;height:0px;border:6px solid transparent;border-top-color:#197dff;margin-top:6px;margin-bottom: 6px;"></div>
        <div style="width:0px;height:0px;border:6px solid transparent;border-bottom-color:#fd7112;"></div>
      </div>
      <!-- 比例 -->
      <div>
        <div style="height: 14px;font-size: 14px;font-weight: normal;text-align: right;color: #333333;line-height: 14px;margin-bottom: 11px;margin-top: 2px;">0.03%</div>
        <div style="height: 14px;font-size: 14px;font-weight: normal;text-align: right;color: #333333;line-height: 14px;">0.03%</div>
      </div>
    </div>

  </div>
</template>

<script>
import basicEchars from "./basicEchars.vue";
import roseEchars from "./roseEchars.vue";
export default {
  data() {
    return {
      echarsData: {
        id: "fig",
        text: "侯杨柳专属图表",
        width: 810,
        height: 316,
        formatter: this.formatter,
        xData: [
          "7-24",
          "7-25",
          "7-26",
          "7-27",
          "7-28",
          "7-29",
          "7-30",
          "8-1",
          "8-2",
          "8-3",
          "8-4",
          "8-5",
          "8-6",
          "8-7",
        ],
        yName: "营收:万元",
        series: [
          {
            type: "bar",
            data: [50, 28, 50, 14, 92, 42, 32, 52, 26, 16, 26, 78, 28, 42],
            barWidth: 12,
            barCategoryGap: "20%",
            itemStyle: {
              normal: {
                offset: 0,
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#197dff" },
                  { offset: 1, color: "#a1caff" },
                ]),
              },
            },
          },
        ],
      },

      echarsData2: {
        id: "fig2",
        text: "侯杨柳专属图表2222",
        width: 810,
        height: 316,
        formatter: this.formatter2,
        color: ["#6ce4ff", "#71b8ff"],
        xData: [
          "7-24",
          "7-25",
          "7-26",
          "7-27",
          "7-28",
          "7-29",
          "7-30",
          "8-1",
          "8-2",
          "8-3",
          "8-4",
          "8-5",
          "8-6",
          "8-7",
        ],
        yName: "营收:万元",
        series: [
          {
            type: "bar",
            data: [50, 28, 50, 14, 92, 42, 32, 52, 26, 16, 26, 78, 28, 42],
            barWidth: 12,
            barCategoryGap: "20%",
            itemStyle: {
              normal: {
                offset: 0,
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#197dff" },
                  { offset: 1, color: "#a1caff" },
                ]),
              },
            },
          },

          //下面的立体,控制颜色是color第一个
          {
            data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            type: "pictorialBar",
            barMaxWidth: "12",
            symbol: "diamond",
            symbolOffset: [0, "50%"],
            symbolSize: [12, 8],
            zlevel: 2,
          },
          //上面的立体,控制颜色是color第二个
          {
            data: [50, 28, 50, 14, 92, 42, 32, 52, 26, 16, 26, 78, 28, 42],
            type: "pictorialBar",
            barMaxWidth: "12",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [12, 8],
            zlevel: 2,
          },
        ],
      },

      echarsData3: {
        id: "fig3",
        text: "侯杨柳专属图表33333",
        subtext: "副标题33333",
        width: 810,
        height: 316,
        formatter: this.formatter2,
        legend: {
          data: ["图例1", "图例2"],
          top: "5%",
        },
        // color: ["#45ddff", "#45a2ff", "#ff8a6a"],
        xData: [
          "7-24",
          "7-25",
          "7-26",
          "7-27",
          "7-28",
          "7-29",
          "7-30",
          "8-1",
          "8-2",
          "8-3",
          "8-4",
          "8-5",
          "8-6",
          "8-7",
        ],
        yName: "营收:万元",
        series: [
          {
            name: "图例1",
            type: "bar",
            stack: "a",
            data: [50, 28, 50, 14, 92, 42, 32, 52, 26, 16, 26, 78, 28, 42],
            barWidth: 12,
            barCategoryGap: "20%",
            itemStyle: {
              normal: {
                offset: 0,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#1178ff" },
                  { offset: 1, color: "#11d4ff" },
                ]),
              },
            },
          },
          {
            name: "图例2",
            type: "bar",
            stack: "a",
            data: [20, 20, 20, 20, 6, 20, 10, 10, 10, 10, 10, 10, 10, 10],
            barWidth: 12,
            barCategoryGap: "20%",
            itemStyle: {
              normal: {
                offset: 0,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#ff592d" },
                  { offset: 1, color: "#ff967b" },
                ]),
              },
            },
          },

          //下面的底面,控制颜色是color第一个
          {
            data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            type: "pictorialBar",
            barMaxWidth: "12",
            symbol: "diamond",
            symbolOffset: [0, "50%"],
            symbolSize: [12, 8],
            zlevel: 2,
            color: "#45ddff",
          },
          //中间的那个面,控制颜色是color第二个
          {
            data: [50, 28, 50, 14, 92, 42, 32, 52, 26, 16, 26, 78, 28, 42],
            type: "pictorialBar",
            barMaxWidth: "12",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [12, 8],
            zlevel: 3,
            color: "#45a2ff",
          },
          //最上面那个面,控制颜色是color第三个
          {
            data: [70, 48, 70, 34, 98, 62, 42, 62, 36, 26, 36, 88, 38, 52],
            type: "pictorialBar",
            barMaxWidth: "12",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [12, 8],
            zlevel: 3,
            color: "#ff8a6a",
          },
        ],
      },
      roseData: {
        id:'rose1',
        text:'各车型平均油耗情况',
        subtext:'各公司各车型平均油耗占比',
        formatter: "{per|{b} {d}%}  {ng|{c}L}   {hr|}",
        data: [
          { value: 920, name: "车型1", itemStyle: { color: "#fa9564" } },
          { value: 742, name: "车型2", itemStyle: { color: "#00e296" } },
          { value: 528, name: "车型3", itemStyle: { color: "#ffd700" } },
          { value: 528, name: "车型4", itemStyle: { color: "#0bc2ff" } },
          { value: 306, name: "车型5", itemStyle: { color: "#197dff" } },
          { value: 201, name: "车型6", itemStyle: { color: "#424aff" } },
          { value: 205, name: "车型7", itemStyle: { color: "#b644ff" } },
          { value: 205, name: "车型8", itemStyle: { color: "#f039b0" } },
        ],
      },
    };
  },
  methods: {
    formatter: function (params) {
      return (
        "<div>" +
        '<div style="display:flex;align-items: center;height:30px">' +
        params[0].name +
        '<div style="height: 14px;font-size: 14px;color: #999999;line-height: 14px;margin-left:42px;margin-right:10px">' +
        "同比" +
        "</div>" +
        '<div style="width:0px;height:0px;border:6px solid transparent;border-top-color:#197dff;margin-top:6px">' +
        "</div>" +
        '<div style="height: 14px;font-size: 14px;color: #333333;line-height: 14px;margin-left:4px">' +
        "0.03%" +
        "</div>" +
        "</div>" +
        '<div style="display:flex;align-items: center;height:30px">' +
        '<div style="height: 24px;font-size: 24px;font-weight: 700;color: #1a7dff;line-height: 24px;">' +
        params[0].value +
        "</div>" +
        "万元" +
        '<div style="height: 14px;font-size: 14px;color: #999999;line-height: 14px;margin-left:16px;margin-right:10px">' +
        "环比" +
        "</div>" +
        '<div style="width:0px;height:0px;border:6px solid transparent;border-bottom-color:#fd7112;margin-bottom:6px">' +
        "</div>" +
        '<div style="height: 14px;font-size: 14px;color: #333333;line-height: 14px;margin-left:4px">' +
        "0.03%" +
        "</div>" +
        "</div>" +
        "</div>"
      );
    },

    formatter2: function (params) {
      return `
    <div style="background: #ffffff;border-radius: 8px;display: flex;">
      <div style="display:flex;flex-direction: column;margin-right: 20.5px;">
        <div style="height: 14px;font-size: 14px;font-weight: normal;text-align: left;color: #999999;line-height: 14px;margin-bottom: 7px;">${params[0].name}</div>
        <div>
          <span style="height: 20px;font-size: 24px;font-weight: 700;text-align: left;color: #1a7dff;line-height: 20px;margin-right:9px;">${params[0].value}</span>
          <span style="width: 24px;height: 12px;font-size: 12px;color: #999999;line-height: 12px;">万元</span>
        </div>
      </div>

      <div style="margin-right: 10.34px;">
        <div style="width: 28px;height: 14px;font-size: 14px;font-weight: normal;text-align: left;color: #999999;line-height: 14px;margin-bottom: 11px;margin-top: 2px;">同比</div>
        <div style="width: 28px;height: 14px;font-size: 14px;font-weight: normal;text-align: left;color: #999999;line-height: 14px;">环比</div>
      </div>
      
      <div style="margin-right: 5px;">
        <div style="width:0px;height:0px;border:6px solid transparent;border-top-color:#197dff;margin-top:6px;margin-bottom: 6px;"></div>
        <div style="width:0px;height:0px;border:6px solid transparent;border-bottom-color:#fd7112;"></div>
      </div>

      <div>
        <div style="height: 14px;font-size: 14px;font-weight: normal;text-align: right;color: #333333;line-height: 14px;margin-bottom: 11px;margin-top: 2px;">0.03%</div>
        <div style="height: 14px;font-size: 14px;font-weight: normal;text-align: right;color: #333333;line-height: 14px;">0.03%</div>
      </div>
    </div>
       `;
    },
  },
  mounted() {
  },
  components: {
    basicEchars,
    roseEchars,
  },
};
</script>
<style>
</style>